<template>
  <div :id="chartId"></div>
</template>

<script>
  import G2 from "@antv/g2";
  export default {
    props: {
      height: {
        type: Number,
        default: 360
      }
    },
    data() {
      return {
        chartId: "chart" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""),
        chartData: [{
          type: '分类一',
          value: 27
        }, {
          type: '分类二',
          value: 25
        }, {
          type: '分类三',
          value: 18
        }, {
          type: '分类四',
          value: 15
        }, {
          type: '分类五',
          value: 10
        }, {
          type: 'Other',
          value: 5
        }],
      }
    },
    mounted() {
      this.createChart(this.chartId, this.chartData);
    },
    methods: {
      createChart(container, data) {
        // 根据比例，获取两点之间的点
        function getPoint(p0, p1, ratio) {
          return {
            x: (1 - ratio) * p0.x + ratio * p1.x,
            y: (1 - ratio) * p0.y + ratio * p1.y
          };
        }
        var pointRatio = 0.7; // 设置开始变成圆弧的位置 0.7
        // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
        var sliceNumber = 0.005;
        // 自定义 other 的图形，增加两条线
        G2.Shape.registerShape('interval', 'platelet', {
          draw: function draw(cfg, container) {
            cfg.points[1].y = cfg.points[1].y - sliceNumber;
            cfg.points[2].y = cfg.points[2].y - sliceNumber;
            var centerPoint = {
              x: cfg.points[3].x,
              y: (cfg.points[2].y + cfg.points[3].y) / 2
            };
            centerPoint = this.parsePoint(centerPoint);
            var points = this.parsePoints(cfg.points);
            var path = [];
            var tmpPoint1 = getPoint(points[0], points[3], pointRatio);
            var tmpPoint2 = getPoint(points[1], points[2], pointRatio);
            path.push(['M', points[0].x, points[0].y]);
            path.push(['L', tmpPoint1.x, tmpPoint1.y]);
            path.push(['Q', points[3].x, points[3].y, centerPoint.x, centerPoint.y]);
            path.push(['Q', points[2].x, points[2].y, tmpPoint2.x, tmpPoint2.y]);
            path.push(['L', points[1].x, points[1].y]);
            path.push(['z']);
            return container.addShape('path', {
              attrs: {
                fill: cfg.color,
                path: path
              }
            });
          }
        });
        var chart = new G2.Chart({
          container,
          forceFit: true,
          height: this.height,
          padding: [50, 0],
          background: {
            fill: "#fff"
          }
        });
        chart.source(data);
        chart.coord('theta');
        chart.tooltip({
          showTitle: false
        })
        chart.intervalStack().position('value').shape('platelet').color('type').label('type');
        chart.render();

      },
    }
  }
</script>
